<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="excel">
      <div>
        <el-container style="height: 590px; border: 1px solid #eee">
          <el-aside width="300px;" style="border: 1px solid rgb(238, 238, 238);">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="岗位" name="first">
                <div>
                  <!-- <div style="margin-left: 10px;">
                      <el-select v-model="clientInfo" placeholder="" @change="userChange">
                        <el-option v-for="(item,index) in clientList" :key="index" :label="item.name" :value="item.frontServiceId" />
                      </el-select>
                    </div> -->
                  <el-input v-model="filterText" style="margin:10px;width: 280px;" placeholder="输入内容" />

                  <el-tree
                    ref="tree"
                    class="filter-tree"
                    :data="userTree"
                    :props="defaultTasjProps"
                    default-expand-all
                    highlight-current
                    :filter-node-method="filterNode"
                    @node-click="filterNodeClick"
                  />
                </div>
              </el-tab-pane>
              <el-tab-pane label="组织机构" name="second">
                <div>
                  <el-input v-model="filterTextOrg" style="margin:10px;width: 280px;" placeholder="输入内容" />

                  <el-tree
                    ref="Orgtree"
                    class="filter-tree"
                    :data="orgTree"
                    :props="defaultProps"
                    default-expand-all
                    highlight-current
                    :filter-node-method="orgNode"
                    @node-click="orgNodeClick"
                  />
                </div>
              </el-tab-pane>
              <el-tab-pane label="班组" name="three">
                <div>
                  <el-input v-model="filterTextTeam" style="margin:10px;width: 280px;" placeholder="输入内容" />
                  <el-tree
                    ref="teamTree"
                    class="filter-tree"
                    :data="teamData"
                    :props="defaultPropsTeam"
                    default-expand-all
                    highlight-current
                    :filter-node-method="TeamNode"
                    @node-click="teamClick"
                  />
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-aside>
          <el-container>
            <el-main style="padding: 0px;">
              <el-input
                v-model="filterPerson"
                style="margin:10px;width: 280px;"
                placeholder="输入内容"
                @change="filterPersonChange"
              />
              <el-table
                ref="multipleTable"
                height="535"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @select-all="handleSelectionChange"
                @select="selectChange"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="firstName" label="姓名">
                  <template slot-scope="scope">
                    <span>{{ scope.row.firstName || scope.row.personnelName }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名">
                  <template slot-scope="scope">
                    <span>{{ scope.row.username || scope.row.userName }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-container>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="excel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  props: ['dialogShow', 'title'],
  data() {
    return {
      activeName: 'first',
      filterText: '',
      filterTextOrg: '',
      filterTextTeam: '',
      dialogFormVisible: false,
      tableData: [],
      filterPerson: '',
      defaultProps: {
        children: 'children',
        label: 'organizationName'
      },
      defaultPropsTeam: {
        children: 'children',
        label: 'teamName'
      },
      defaultTasjProps: {
        children: 'children',
        label: 'postName'
      },
      orgTree: [],
      clientList: [],
      clientInfo: '',
      userTree: [],
      checkList: [],
      teamData: [],
      filterData: []
    }
  },
  watch: {
    dialogShow(value, row) {
      // this.checkList = []
      this.tableData = []
      this.gerOrgTree()
      this.getClit()
      this.getTeamqueryPage()
      this.dialogFormVisible = value
    },
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    filterTextOrg(val) {
      this.$refs.Orgtree.filter(val)
    },
    filterTextTeam(val) {
      this.$refs.teamTree.filter(val)
    }
    // checkUserList(value) {
    //   this.checkList = JSON.parse(JSON.stringify(value))
    //   console.log('this.checkList', this.checkList)
    // }

  },
  mounted() {
  },
  methods: {
    ...mapActions('personnelManager', ['teamQueryPersonnelList', 'queryDownOrgPersonnelList', 'TeamqueryPage', 'queryOrgList', 'postInfoQyeryList', 'postInfoQyeryPage', 'queryPersonnelList']),
    excel() {
      this.dialogFormVisible = false
      this.checkList = []
      this.filterText = ''
      this.filterTextOrg = ''
      this.filterTextTeam = ''
      this.$emit('signOut')
    },
    sure() {
      this.$emit('uploadDispatchPost', this.checkList)
      this.filterText = ''
      this.filterTextOrg = ''
      this.filterTextTeam = ''
      this.checkList = []
    },
    checkUserList(value) {
      console.log('13123', value)
      this.activeName = 'first'
      this.checkList = JSON.parse(JSON.stringify(value))
    },
    // 获取岗位
    getClit() {
      var parsm = {
        pageSize: 999,
        pageNo: 1,
        active: 0
      }
      this.postInfoQyeryPage(parsm)
        .then(res => {
          if (res.data.code !== '0') {
            return
          }
          this.userTree = res.data.data.list
          this.tableData = []
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    filterPersonChange() {
      this.tableData = []
      var data = []
      var parms = []
      this.filterData.filter(item => {
        if (item.personnelName.indexOf(this.filterPerson) > -1 || item.userName.indexOf(this.filterPerson) > -1) { // indexOf方法中如果xxx.indexOf("")返回值为0
          data.push(item)
        }
      })
      if (this.filterPerson === '') {
        data = this.filterData
      }
      for (let j = 0; j < data.length; j++) {
        for (let i = 0; i < this.checkList.length; i++) {
          if (this.checkList[i].userId === data[j].userId) {
            parms.push(data[j])
          }
        }
      }
      this.tableData = []
      this.tableData = data
      this.$nextTick(() => {
        if (parms) {
          parms.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        }
      })
    },
    // 班组选择查询人员
    teamClick(value) {
      this.teamQueryPersonnelList(value.id)
        .then(res => {
          if (res.data.code !== '0') {
            return
          }
          var data = res.data.data
          this.filterData = JSON.parse(JSON.stringify(res.data.data))
          var parms = []
          for (let j = 0; j < data.length; j++) {
            data[j].teamId = value.id
            for (let i = 0; i < this.checkList.length; i++) {
              if (this.checkList[i].userId === data[j].userId) {
                parms.push(data[j])
              }
            }
          }
          this.tableData = []
          this.tableData = data
          this.$nextTick(() => {
            if (parms) {
              parms.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
              })
            }
          })
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    // 岗位节点点击
    filterNodeClick(row) {
      this.getIamUserList(row.postId)
    },
    // 组织树节点点击
    orgNodeClick(row) {
      this.getqueryPersonnelList(row.id)
    },
    // 根据组织查询人员
    getqueryPersonnelList(value) {
      this.queryDownOrgPersonnelList(value)
        .then(res => {
          if (res.data.code !== '0') {
            return
          }
          var data = res.data.data
          this.filterData = JSON.parse(JSON.stringify(res.data.data))
          var parms = []
          for (let j = 0; j < data.length; j++) {
            data[j].orgId = value
            for (let i = 0; i < this.checkList.length; i++) {
              if (this.checkList[i].userId === data[j].userId) {
                parms.push(data[j])
              }
            }
          }
          this.tableData = []
          this.tableData = data
          this.$nextTick(() => {
            if (parms) {
              parms.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
              })
            }
          })
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    // 更具岗位获取人员
    getIamUserList(value) {
      this.postInfoQyeryList(value)
        .then(res => {
          if (res.data.code !== '0') {
            return
          }
          this.tableData = res.data.data
          this.filterData = JSON.parse(JSON.stringify(res.data.data))
          var parms = []
          console.log('this.checkList', this.checkList)
          for (let j = 0; j < this.tableData.length; j++) {
            for (let i = 0; i < this.checkList.length; i++) {
              if (this.checkList[i].userId === this.tableData[j].userId) {
                parms.push(this.tableData[j])
              }
            }
          }
          this.$nextTick(() => {
            if (parms) {
              parms.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
              })
            }
          })
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    handleClick() { },
    // 岗位过滤事件
    filterNode(value, data) {
      if (!value) return true
      return data.postName.indexOf(value) !== -1
    },
    // 任务树过滤事件
    orgNode(value, data) {
      if (!value) return true
      return data.organizationName.indexOf(value) !== -1
    },
    // 班组过滤
    TeamNode(value, data) {
      if (!value) return true
      return data.teamName.indexOf(value) !== -1
    },
    // 角色列表全选事件
    handleSelectionChange(row) {
      var flage = false
      for (let i = 0; i < this.tableData.length; i++) {
        flage = false
        for (let j = 0; j < this.checkList.length; j++) {
          if (row.length === 0) {
            flage = true
            if (this.tableData[i].userId === this.checkList[j].userId) {
              this.checkList.splice(j, 1)
              break
            }
          } else {
            if (this.tableData[i].userId === this.checkList[j].userId) {
              flage = true
              break
            }
          }
        }
        if (!flage) {
          this.checkList.push(this.tableData[i])
        }
      }
    },
    // 角色列表单选事件
    selectChange(value1, value2) {
      var flage = false
      for (let i = 0; i < this.checkList.length; i++) {
        flage = false
        if (value2.userId === this.checkList[i].userId) {
          flage = true
          this.checkList.splice(i, 1)
          break
        }
      }
      if (!flage) {
        this.checkList.push(value2)
      }
    },
    // 获取班组信息
    getTeamqueryPage() {
      const parms = {
        currPage: 1,
        pageSize: 9999
      }
      this.TeamqueryPage(parms)
        .then(res => {
          if (res.data.code !== '0') {
            return
          }
          this.teamData = res.data.data.list
        })
        .catch(err => {
          console.log(err)
          this.loadingTb = false
        })
    },
    // 获取组织列表树
    gerOrgTree() {
      var parms = {
        orgName: this.orgName
      }
      this.queryOrgList(parms)
        .then(res => {
          if (res.data.code !== '0') {
            return
          }
          var data = res.data.data
          for (let i = 0; i < data.length; i++) {
            // 将没有转换成树的原数据设置key为... 的展开
            data[i].expanded = true
            // this.$refs.selectTree.store.nodesMap[data[i].id].expanded = true
          }
          const map = {}
          const val = []
          data.forEach((item) => {
            map[item.id] = item
          })
          data.forEach((item) => {
            const parent = map[item.parentOrgId]
            if (parent) {
              (parent.children || (parent.children = [])).push(item)
            } else {
              val.push(item)
            }
          })
          this.orgTree = []
          this.orgTree = val
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
    }
  }
}
</script>
<style lang="">

</style>
